jQuery(function (){
var countID = 1;
$('#addText').click(function() {
    //create an element
    var $element = $('<div data-id="' + countID + '" id="draggableResizable" class="inlinedragg"><span>draggme</span><textarea name="text' + countID + '"  id="inlinearea" ></textarea> <div class="count"/></div></div>');
    //append it to the DOM
    $(".caption").append($element);
     countID++;
    //make it "draggable" and "resizable"
    $element.draggable({
         containment: "#inlineimages",
        scroll: false,
        drag: function(event) {
//            console.log(this);
            var thisPos = $(this).position();
            var parentPos = $(this).parent().position();
            var x = thisPos.left - parentPos.left;
            var y = thisPos.top - parentPos.top;
            var id = $(this).attr('data-id');
            var text = $(this).val();
           $(this).find(".count").text(x + ", " + y);
           var item={ coordTop:  y, coordLeft: x  };
         
        }

    }).mouseup(function(){
              $.post('updatecoords.php', 'data='+$.toJSON(item), function(response){
                        if(response=="success")
                            $("#respond").html('<div class="success">X and Y Coordinates Saved!</div>').hide().fadeIn(1000);
                            setTimeout(function(){ $('#respond').fadeOut(1000); }, 2000);
                        });
                });
   
 
  });
});